<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <template>
        <div>
            <input v-model="message" placeholder="输入消息"/>
            <button @click="sendMessage">发送</button>
            <div v-for="msg in allMessage" :key="msg">{{ msg }}</div>

        </div>
    </template>
</div>

</body>
<script src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                myUser: {
                    id: ''
                },
                anotherUser: {
                    id: ''
                },
                ws: null,
                message: '',
                messages: [],
                myMessages: [],
                allMessage: [],
                usernames: [],
                userMessage: []
            }
        },
        created() {
            let search = location.search;
            let urlParams = new URLSearchParams(search);
            this.myUser.id = JSON.parse(urlParams.get('myId'));
            this.anotherUser.id = JSON.parse(urlParams.get('anotherId'));
            this.getDialog();
            this.connectWebSocket();
        },
        methods: {
            getDialog() {
                var _this = this;
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/webdemo/method/dialog/getDialog?userId=' + _this.myUser.id + '&anotherId=' + _this.anotherUser.id
                }).then(function (resp) {
                    _this.usernames = [];
                    _this.userMessage = [];
                    var dialogViews = resp.data.data[0];
                    for (let i = 0; i < dialogViews.length; i++) {
                        _this.usernames.push(dialogViews[i].username);
                        _this.userMessage.push(dialogViews[i].dialog.message);
                    }
                    for (var i = 0; i < _this.usernames.length; i++) {
                        _this.allMessage.push(_this.usernames[i] + ':' + _this.userMessage[i]);
                    }
                });
            },
            connectWebSocket() {
                this.ws = new WebSocket("ws://localhost:8080/webdemo/privateMessage/" + this.anotherUser.id);
                this.ws.onopen = () => console.log('success!');
                this.ws.onerror = () => console.log('fail');
                this.ws.onmessage = (message) => {
                    const data = JSON.parse(message.data);
                    this.allMessage.push(data.user.username + ':' + data.content);
                };
                this.ws.onClose = () => console.log("close");
            },
            sendMessage() {
                if (this.ws && this.ws.readyState === WebSocket.OPEN) {
                    this.ws.send(JSON.stringify({
                        content: this.message,
                        username: this.myUser.id,
                        user: null
                    }));
                    this.allMessage.push('我:' + this.message);
                    this.message = ''
                }
            }
        }
    });
</script>
</html>